<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网络监控仪表盘</title>
    <link rel="stylesheet" href="/static/styles.css">
</head>
<body>
    <div class="container">
        <div class="header">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
                <h1 style="margin: 0;">网络监控仪表盘</h1>
                <nav class="nav-menu">
                    <a href="/" class="nav-link active">🏠 网络监控</a>
                    <a href="/process-monitor" class="nav-link">🔍 进程监控</a>
                </nav>
            </div>
            <div class="info">
                <span>主机: {{.Hostname}}</span> | 
                <span>地址: {{.Ipv4}}</span> | 
                <span>更新时间: <span id="update-time">加载中...</span></span>
            </div>
        </div>

        <div class="summary-cards">
            <div class="card">
                <div class="card-content">
                    <div class="card-icon">🔌</div>
                    <div class="card-details">
                        <div class="card-title">总接口数</div>
                        <div class="card-value" id="total-interfaces">-</div>
                        <div class="card-label">个网卡</div>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-content">
                    <div class="card-icon">🖥️</div>
                    <div class="card-details">
                        <div class="card-title">物理网卡</div>
                        <div class="card-value" id="physical-interfaces">-</div>
                        <div class="card-label">个</div>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-content">
                    <div class="card-icon">🌐</div>
                    <div class="card-details">
                        <div class="card-title">虚拟网卡</div>
                        <div class="card-value" id="virtual-interfaces">-</div>
                        <div class="card-label">个</div>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-content">
                    <div class="card-icon">📡</div>
                    <div class="card-details">
                        <div class="card-title">活跃网卡</div>
                        <div class="card-value" id="active-interfaces">-</div>
                        <div class="card-label">个</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-icon">💻</div>
                <div class="stat-content">
                    <div class="stat-value" id="cpu-usage">-</div>
                    <div class="stat-label">CPU使用率 (%)</div>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon">🧠</div>
                <div class="stat-content">
                    <div class="stat-value" id="memory-usage">-</div>
                    <div class="stat-label">内存使用率 (%)</div>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon">💾</div>
                <div class="stat-content">
                    <div class="stat-value" id="memory-used">-</div>
                    <div class="stat-label">已用内存 (MB)</div>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon">🔄</div>
                <div class="stat-content">
                    <div class="stat-value" id="goroutines">-</div>
                    <div class="stat-label">Go协程数</div>
                </div>
            </div>
        </div>

        <div class="interfaces-table">
            <div class="table-header">
                <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px;">
                    <span>📊 网卡详细信息</span>
                    <div class="search-controls">
                        <div class="search-box">
                            <span class="search-icon">🔍</span>
                            <input type="text" id="interface-search" placeholder="输入网卡名称进行搜索...">
                            <button type="button" class="clear-search" id="clear-search" style="display: none;">✕</button>
                        </div>
                        <label class="custom-checkbox">
                            <input type="checkbox" id="show-virtual" checked>
                            <span>🌐 虚拟网卡</span>
                        </label>
                        <label class="custom-checkbox">
                            <input type="checkbox" id="show-idle" checked>
                            <span>🚫 空闲网卡</span>
                        </label>
                    </div>
                </div>
                <!-- 搜索结果提示 -->
                <div class="search-results-info hidden" id="search-results-info">
                    <span>📊</span>
                    <span id="search-results-text">搜索结果: 找到 0 个网卡</span>
                </div>
            </div>
            <table>
                <thead>
                    <tr>
                        <th class="sortable" data-sort="name">网卡名称 <span class="sort-icon"></span></th>
                        <th>类型</th>
                        <th class="sortable" data-sort="received_mbps">下载速度 <span class="sort-icon"></span></th>
                        <th class="sortable" data-sort="sent_mbps">上传速度 <span class="sort-icon"></span></th>
                        <th class="sortable" data-sort="total_received_gb">总下载流量 <span class="sort-icon"></span></th>
                        <th class="sortable" data-sort="total_sent_gb">总上传流量 <span class="sort-icon"></span></th>
                        <th class="sortable" data-sort="dropped">丢包数 <span class="sort-icon"></span></th>
                        <th>丢包率</th>
                        <th>状态</th>
                    </tr>
                </thead>
                <tbody id="interfaces-tbody">
                    <tr>
                        <td colspan="9" class="loading">正在加载网卡数据...</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- API客户端文件 -->
    <script src="/static/page-api.js"></script>
    <script src="/static/network-api.js"></script>
    <script src="/static/sse-api.js"></script>
    
    <!-- 网卡排序器 -->
    <script src="/static/network-sorter.js"></script>
    
    <!-- 主应用逻辑 -->
    <script src="/static/app.js"></script>
    
    <footer style="text-align: center; margin-top: 40px; padding: 20px; color: white; opacity: 0.8;">
        <small><a href="https://gitee.com/liumou_site/go-network-monitoring" target="_blank" style="color: white; text-decoration: none;"><span class="app-name-display">{{.AppName}}</span> v<span class="version-display">{{.Version}}</span></a> - 多网卡实时网络流量监控工具</small><br>
        <small>运行时间: <span id="uptime">00:00:00</span></small>
    </footer>
</body>
</html>
